<template>
  <div class="login">
    <div class="left">
      <div class="title">
        <img src="@/assets/login_icon.png" alt="" />
        <span class="titleName">黑马面面</span>
        <span class="titleLine">|</span>
        <span class="titleName2">用户登录</span>
      </div>
      <el-form ref="loginFormRef" :rules="loginRules" :model="loginForm">
        <el-form-item prop="phone">
          <el-input
            prefix-icon="el-icon-user"
            v-model="loginForm.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            v-model="loginForm.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row>
            <el-col :span="18">
              <el-input
                prefix-icon="el-icon-key"
                placeholder="请输入验证码"
                v-model="loginForm.code"
              ></el-input>
            </el-col>
            <el-col :span="5">
              <img
                :src="codeURL"
                @click="changeCodeURL"
                class="codeUrl"
                alt=""
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item prop="isCheck">
          <el-checkbox v-model="loginForm.isCheck"></el-checkbox>
          我已阅读并同意 <el-link type="primary">用户协议</el-link> 和
          <el-link type="primary">隐私条款</el-link>
        </el-form-item>
        <el-form-item>
          <el-button style="width:100%;" @click="submit" type="primary"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="register" style="width:100%;" type="primary"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <img src="@/assets/login_bg.png" alt="" />
    </div>
    <!-- 注册弹出框 -->
    <Register ref="registerRef" />
  </div>
</template>

<script lang="ts">
import { login } from '@/api/login'
import { setToken } from '@/utils/token'
import { Vue, Component } from 'vue-property-decorator'
import Register from './register.vue'
@Component({
  components: {
    Register
  }
})
export default class Login extends Vue {
  declare loginForm: any
  declare codeURL: string
  declare $message: any

  data() {
    return {
      codeURL: process.env.VUE_APP_BASEURL + '/captcha?type=login',
      loginForm: {
        phone: '', // 手机号
        password: '', // 密码
        code: '', // 验证码
        isCheck: false // 是否选中
      },
      loginRules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            validator: (rule: string, value: string, callback: Function) => {
              const reg = /^1[3456789][0-9]{9}$/
              if (!reg.test(value)) {
                callback(new Error('手机号不合法!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 12,
            message: '密码长度在 6 到 12 个字符之间',
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            min: 4,
            max: 4,
            message: '验证码必须是4个字符',
            trigger: 'blur'
          }
        ],
        isCheck: [
          {
            validator: (rule: string, value: boolean, callback: Function) => {
              if (value !== true) {
                callback(new Error('必须勾选用户协议!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  }
  changeCodeURL() {
    this.codeURL =
      process.env.VUE_APP_BASEURL +
      '/captcha?type=login&random=' +
      Math.random()
  }
  submit() {
    ;(this.$refs.loginFormRef as any).validate(async (valid: boolean) => {
      if (valid) {
        const res = await login('/login', this.loginForm)
        if (res.data.code === 200) {
          // 提示
          this.$message.success('登录成功~')
          // 保存到本地
          setToken(res.data.data.token)
          // 跳转
          this.$router.push('/layout')
        } else {
          this.$message.error(res.data.message)
        }
      }
    })
  }
  register() {
    ;(this.$refs.registerRef as any).registerForm = {
      avatar: '', // 头像地址
      username: '', // 昵称
      email: '', // 邮箱
      phone: '', // 手机号
      password: '', // 密码
      code: '', // 图形验证码
      rcode: '' // 验证码
    }
    ;(this.$refs.registerRef as any).dialogVisible = true
  }
}
</script>

<style lang="scss">
.login {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  background: linear-gradient(225deg, #1493fa, #01c6fa);
  .left {
    width: 478px;
    height: 550px;
    background: #f5f5f5;
    padding: 43px;
    .title {
      margin-bottom: 20px;
      .titleName {
        font-size: 24px;
        font-weight: 400;
        color: #0c0c0c;
        margin-left: 15px;
        margin-right: 15px;
      }
      .titleLine {
        color: #ccc;
        font-size: 24px;
      }
      .titleName2 {
        font-size: 22px;
        margin-left: 15px;
      }
    }
    .codeUrl {
      margin-left: 5px;
      width: 100%;
      height: 40px;
    }
  }
}
</style>
